<template>
  <div class="relative">
    <div class="aspect-square bg-dark rounded-lg overflow-hidden shadow-xl">
      <div class="grid grid-cols-[repeat(auto-fill,minmax(20px,1fr))] grid-rows-[repeat(auto-fill,minmax(20px,1fr))] w-full h-full">
        <div 
          v-for="(segment, index) in snake" 
          :key="index" 
          :class="[
            'relative',
            index === 0 ? 'snake-head' : 'snake-body',
            'border border-darker'
          ]"
          :style="{
            gridColumnStart: segment.x / cellSize + 1,
            gridRowStart: segment.y / cellSize + 1
          }"
        ></div>
        
        <div 
          class="food" 
          :style="{
            gridColumnStart: food.x / cellSize + 1,
            gridRowStart: food.y / cellSize + 1
          }"
        ></div>
      </div>
    </div>
    
    <div 
      v-if="!gameActive" 
      class="absolute inset-0 bg-dark/80 flex flex-col items-center justify-center rounded-lg"
    >
      <h2 class="text-2xl font-bold text-light mb-2">游戏结束</h2>
      <p class="text-light text-lg mb-4">你的分数: <span class="font-bold text-primary">{{ snake.length * 10 - 30 }}</span></p>
      <button @click="$emit('game-over')" class="bg-primary hover:bg-green-600 text-white font-bold py-2 px-6 rounded transition-all duration-200 transform hover:scale-105">
        再来一局
      </button>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  snake: {
    type: Array,
    required: true
  },
  food: {
    type: Object,
    required: true
  },
  cellSize: {
    type: Number,
    required: true
  },
  gameActive: {
    type: Boolean,
    required: true
  }
})

const emit = defineEmits(['game-over'])
</script>

<style scoped>
.bg-dark {
  background-color: #111;
}
.snake-head {
  background-color: #4CAF50;
}
.snake-body {
  background-color: rgba(76, 175, 80, 0.9);
}
.food {
  background-color: #FF5252;
  border-radius: 50%;
}
.border-darker {
  border-color: #0a0a0a;
}
.text-light {
  color: #f5f5f5;
}
.text-primary {
  color: #4CAF50;
}
.shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
}
</style>
    